<template>
	<view class="popup_filter_container">
		<u-popup :customStyle="{'overflow': 'hidden'}" mode="right" :show="show" @close="handleCloseFilterPop">
			<view class="pop_content box pt_16 pbsafe_100 pl_16 pr_16 bc_fff box width_288 h100 fx_col flow_h"
				:style="[paddingTop]">
				<view class="fx_1 flow_y">
					<view class="mb_24" v-if="filterData.brandList&&filterData.brandList.length">
						<view class="mb_12">
							品牌
						</view>
						<view class="fx fx_w grid_4">
							<view class="br_4 search_item fz_12 plr_4 fe fb fx aic jcc height_32 width_82 box"
								:style="[brandSelect(item)]" v-for="item,index in filterData.brandList" :key="index"
								@click="handleClick('brandList','brandSelect',item)">
								{{item.brandName||''}}
							</view>
						</view>
					</view>
					<view class="mb_24" v-if="filterData.styleList&&filterData.styleList.length">
						<view class="mb_12">
							风格
						</view>
						<view class="fx fx_w grid_4">
							<view class="br_4 search_item fz_12 plr_4 fe fb fx aic jcc height_32 width_82 box"
								:style="[styleSelect(item)]" v-for="item,index in filterData.styleList" :key="index"
								@click="handleClick('styleList','styleSelect',item)">
								{{item.styleName||''}}
							</view>
						</view>
					</view>
					<view class="mb_24" v-if="filterData.materialList&&filterData.materialList.length">
						<view class="mb_12">
							材质
						</view>
						<view class="fx fx_w grid_4">
							<view class="br_4 search_item fz_12 plr_4 fe fb fx aic jcc height_32 width_82 box"
								:style="[materialSelect(item)]" v-for="item,index in filterData.materialList"
								:key="index" @click="handleClick('materialList','materialSelect',item)">
								{{item.materialName||''}}
							</view>
						</view>
					</view>
					<view>
						<view class="mb_12">
							价格
						</view>
						<view class="fx fx_nw aic grid_4">
							<u--input v-model="filterData.minPrice" typr="number"
								:customStyle="{'background-color': '#F2F2F2', 'text-align': 'center'}"
								placeholder="最低价" />
							<text>-</text>
							<u--input v-model="filterData.maxPrice" typr="number"
								:customStyle="{'background-color': '#F2F2F2', 'text-align': 'center'}"
								placeholder="最高价" />
						</view>
					</view>
				</view>
				<view class="pa b_0 pbsafe_0 l_0 r_0 fx fz_16 fb bottom_wrap zbi_1">
					<view class="fx_1 lh_44 bc_f6 fc" @click="handleReset">
						重置
					</view>
					<view class="fx_1 lh_44 bc_primary fc_fff fc" @click="handleConfirm">
						确定
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import stickyTopMixin from '@/mixins/sticky_top.js'
	export default {
		mixins: [stickyTopMixin],
		props: {
			show: {
				type: Boolean,
				default: false,
			},
			data: {
				type: Object,
				default: () => ({})
			},
			originData: {
				type: Object,
				default: () => ({})
			},
			navTop: {
				type: Boolean,
				default: false
			}
		},
		computed: {
			brandSelect() {
				return item => this.filterData.brandSelect == item.id ? {
					background: 'rgba(240, 133, 25, 0.10)',
					border: '2rpx solid #F08519',
					color: '#F08519'
				} : {
					background: '#F2F2F2'
				}
			},
			styleSelect() {
				return item => this.filterData.styleSelect == item.id ? {
					background: 'rgba(240, 133, 25, 0.10)',
					border: '2rpx solid #F08519',
					color: '#F08519'
				} : {
					background: '#F2F2F2'
				}
			},
			materialSelect() {
				return item => this.filterData.materialSelect == item.id ? {
					background: 'rgba(240, 133, 25, 0.10)',
					border: '2rpx solid #F08519',
					color: '#F08519'
				} : {
					background: '#F2F2F2'
				}
			},
			paddingTop() {
				return {
					'padding-top': this.navTop ? (this.topHeight + 16 + 'rpx') : '16rpx'
				}
			}
		},
		data() {
			return {
				filterData: {},
				confirm: false
			}
		},
		watch: {
			data: {
				handler(newVal) {
					this.filterData = JSON.parse(JSON.stringify(newVal))
				},
				deep: true
			},
			show: {
				handler(newVal) {
					if (newVal)
						this.confirm = false
				},
				deep: true
			},
		},
		mounted() {
			this.getTopHeight()
		},
		methods: {
			handleClick(type, typeSelect, item) {
				this.$set(this.filterData, typeSelect, this.filterData[typeSelect] == item.id ? '' : item.id)
			},
			handleReset() {
				this.filterData = JSON.parse(JSON.stringify(this.originData))
				this.confirm = false
				this.$emit('confirm')
			},
			handleConfirm() {
				this.confirm = true
				this.$emit('confirm', this.filterData)
			},
			handleCloseFilterPop() {
				if (!this.confirm) {
					this.filterData = JSON.parse(JSON.stringify(this.originData))
					this.$emit('close')
				}
			}
		},
	}
</script>

<style lang="scss">
	.container {}
</style>